<template>
  <div :class="styles.homeContainer">
    <div :class="styles.topBox">

      <div :class="styles.topBar">
        <img src="../assets/img/home/top.jpg" alt="" />
      </div>
      <!-- 服务类别导航 -->
      <div :class="styles.serviceTabs">
        <div :class="[styles.tab, styles.tabActive]">手机</div>
        <div :class="styles.tab">宽带</div>
        <div :class="styles.tab">商城</div>
        <div :class="styles.tab">本地</div>
        <div :class="styles.tab">AI</div>
        <div :class="[styles.tab, styles.serviceHall]" @click="handleRouteSkip">

          <img src="../assets/img/home/fwdt.jpg" alt="" srcset="" />
        </div>
      </div>
      <!-- 用户信息卡片 -->
      <div :class="styles.userCard">
        <div :class="styles.userInfo">
          <div :class="styles.userInfoLeft">
            <div :class="styles.phoneNumber">{{ phoneNumber }}</div>
            <div :class="styles.location">安徽</div>
            <div :class="styles.eyeIcon" @click="handleClickEyes">
              <img :src="isShow ? closeEyes : openEyes" alt="" />
            </div>
          </div>
          <div :class="styles.switchNumber">切换号码</div>
        </div>
        <div :class="styles.userStats">
          <div :class="styles.userStatsBox">
            <div v-for="(item, index) in useStates" :class="styles.statItem" :key="index">
              <span :class="styles.statValue">
                <span :class="styles.statValueNum">{{
                  item.statValueNum
                }}</span>
                <span :class="styles.statValueDecimal">{{ item.statValueDecimal ? "." : ""
                }}{{ item.statValueDecimal }}</span>
                <span :class="styles.statValueUnit">{{ item.unit }}</span>
              </span>
              <span :class="styles.statLabel">{{ item.name }}</span>
              <span :class="styles.btmBtn">{{ item.btn }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 快捷功能区 -->
      <div :class="styles.quickFunctions">
        <img src="../assets/img/home/banner.jpg" alt="" />
      </div>
    </div>

    <!-- 广告横幅 -->
    <div :class="styles.banner">
      <img src="../assets/img/home/ask.jpg" alt="" />
    </div>

    <!-- 热门精选 -->
    <div :class="styles.hotSection">
      <img src="../assets/img/home/hot.jpg" alt="" srcset="">

    </div>

    <!-- 服务分类区 -->
    <!-- <div :class="styles.categorySection">
      <div class="section-title">数码终端</div>
      <div :class="styles.sectionSubtitle">限时补贴</div>
      <div :class="styles.categoryItems">
        <div :class="styles.categoryItem">
          <div :class="styles.itemIcon">🔄</div>
          <div :class="styles.itemName">数码回收</div>
          <div :class="styles.itemDesc">闲置高价收</div>
        </div>
        <div class="category-item">
          <div class="item-icon">🛒</div>
          <div class="item-name">限时折扣</div>
          <div class="item-desc">闪促直降</div>
        </div>
        <div class="category-item">
          <div class="item-icon">🏠</div>
          <div class="item-name">新装宽带</div>
          <div class="item-desc">速度快延迟低</div>
        </div>
        <div class="category-item">
          <div class="item-icon">🎬</div>
          <div class="item-name">流量随心用</div>
          <div class="item-desc">送存储卡</div>
        </div>
      </div>
    </div> -->

    <!-- 底部导航 -->
    <div :class="styles.bottomNav">
      <div :class="styles.navItem" @click="handleClick('home')">
        <div :class="styles.navIcon">
          <img :src="homeImgValue" alt="">
        </div>
      </div>
      <div :class="styles.navItem">
       <div :class="styles.navIcon" :style="{width: '38px'}">

          <img src="../assets/img/home/home_cx.jpg" alt="">
        </div>
      </div>
      <div :class="styles.navItem">
        <div :class="styles.navIcon" :style="{width: '28px'}">
          <img src="../assets/img/home/xbk.jpg" alt="">
        </div>
      </div>
      <div :class="styles.navItem">
       <div :class="styles.navIcon">
          <img src="../assets/img/home/xx.jpg" alt="" :style="{width: '30px'}">
        </div>
      </div>
      <div :class="styles.navItem" @click="handleClick('my')">
       <div :class="styles.navIcon" :style="{width: '23px'}">
          <img :src="myImgValue" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import styles from "./Home.module.less";
import { SearchOutlined } from "@ant-design/icons-vue";
import closeEyes from "../assets/img/home/closeEyes.jpg";
import openEyes from "../assets/img/home/openEyes.jpg";
import homeImg from "../assets/img/home/home.jpg";
import homeActiveImg from "../assets/img/home/home_active.jpg";
import myImg from "../assets/img/home/my.jpg";
import myActiveImg from "../assets/img/home/my_active.jpg";

import { computed, ref } from "vue";
import config from "../config";
import { useRouter } from 'vue-router';
const router = useRouter();
const isShow = ref(true);
const originalPhoneNumber = ref(config.home.phone);
const isActiveHome = ref(true);
const homeImgValue=ref(homeActiveImg)
const myImgValue=ref(myImg)

const phoneNumber = computed(() => {
  return !isShow.value
    ? originalPhoneNumber.value
    : originalPhoneNumber.value.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
});
const useStates = computed(() => {
  const arr = config.home.useStates.map((item) => {
    item.value = item.value.includes(".")
      ? Number(item.value)?.toFixed(2)
      : item.value;
    if (item.value.includes(".")) {
      item.statValueNum = item.value.split(".")[0];
      item.statValueDecimal = item.value.split(".")[1];
    } else {
      item.statValueNum = item.value;
      item.statValueDecimal = "";
    }

    return item;
  });
  return arr;
});
const handleClickEyes = () => {
  isShow.value = !isShow.value;
};

const handleRouteSkip = () => {
  router.push('/services')
}
const handleClick=(path)=>{
  console.log(path,'path');
if(path==='home'){
  homeImgValue.value=homeActiveImg
  myImgValue.value=myImg
  router.push('/')
}
if(path==='my'){
  homeImgValue.value=homeImg
  myImgValue.value=myActiveImg
  router.push('/my')

}
}

</script>
